<template>
	<view class="content-tabar">
		<view class="header">
			<view class="header-wd">我的</view>
			<view class="header-user flex-row">
				<image v-if="userInfo!=null" @tap="goSet" class="header-img" :src="userInfo.avatar?$utils.cdnImg(userInfo.avatar):`../../static/user/header.png`" mode="scaleToFill"></image>
				<image v-if="userInfo==null" @tap="goSet" class="header-img" src="../../static/user/header.png" mode="scaleToFill"></image>
				<view class="flex-column" v-if="userInfo!=null">
					<view class="flex-row header-txt">
						<view>{{userInfo.nickname}}</view>
						<view>ID：{{userInfo.id}}</view>
					</view>
					<view class="flex-row flex-item-center header-dengji" v-if="userInfo.getlevel!=null">
						<image :src="userInfo.getlevel.image?$utils.cdnImg(userInfo.getlevel.image):`../../static/user/dengji.png`" mode="scaleToFill"></image>
						<view>{{userInfo.getlevel.title}}</view>
					</view>
				</view>
				<view class="flex-column" v-if="userInfo==null">
					<view class="flex-row header-txt1">
						<view @tap="login">登录</view>
						<!-- <view>ID：45213688</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="user">
			<view class="user-money flex-row flex-content-around">
				<view class="flex-column price-ones" @tap="gobalance">
					<view>{{userInfo&&userInfo.money?userInfo.money:0}}</view>
					<view>余额</view>
				</view>
				<view class="flex-column price-ones" @tap="$utils.goToUrl('/pages/user/user_integral')">
					<view>{{userInfo&&userInfo.score?userInfo.score:0}}</view>
					<view>积分</view>
				</view>
			</view>
			<view class="top20"></view>
			<view class="order">
				<view class="flex-column">
					<view class="flex-row flex-content-between myorder-header">
						<view>我的订单</view>
						<view class="flex-row flex-item-center myorder-header-img1" @tap="orderList(`all`)">
							<view>全部订单</view>
							<image src="../../static/index/you.png" mode="scaleToFill"></image>
						</view>
					</view>
					<view class="flex-row flex-content-between order-detal">
						<view class="order-one flex-column " v-for="tab in tabList" @tap="orderList(tab.index)">
							<view class="juedui">
								<uni-badge :custom-style="badge_style" v-if="tab.corner&&show_badge" size="small" :text="tab.corner" absolute="rightTop" type="primary" :offset="offset">
								</uni-badge>
							</view>
							<image class="order-detal-img" :src="tab.icon" mode="scaleToFill">
							</image>
							<view class="order-detal-txt">{{tab.name}}</view>
						</view>
					</view>
					
					<view class="list-set">
						<view class="list-set-top flex-column">
							<view class="list-set-detal flex-row flex-content-between flex-item-center" v-for="ite in setList" @tap="tourls(ite)">
								<view class="flex-row flex-item-center">
									<image class="list-set-img1" :src="ite.icon" mode="scaleToFill"></image>
									<view class="list-set-txt1">{{ite.name}}</view>
								</view>
								<image class="list-set-img2" src="../../static/index/you.png" mode="scaleToFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="kf" type="center" :is-mask-click="false">
			<view class="kf" v-if="thisinit!=null&&thisinit.customer_service">
				<view class="kf-top flex-column">
					<view class="flex-column flex-content-center kf-txt">
						<view>联系客服</view>
						<view>客服电话：<text class="txte">{{thisinit.customer_service.phone}}</text></view>
						<view>{{thisinit.customer_service.describe}}</view>
					</view>
					<view class="flex-row flex-content-between kf-btn">
						<view @tap="quxiaoKf">取消</view>
						<view @tap="phoneCalls(thisinit.customer_service.phone)">拨打电话</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				show_badge:true,//遮罩中不能显示badge
				userInfo:null,//用户信息
				offset:[5,5],//角标偏移
				badge_style:{
					backgroundColor:"#ED5126",
					color:"#FFFFFF"
				},
				thisinit:null,
				setList:[
					{
						icon:'../../static/user/list7.png',
						name:"分享",
						location_href:"/pages/user/share"
					},
					{
						icon:'../../static/user/list1.png',
						name:"我的地址",
						location_href:"/pages/user/address_list"
					},
					{
						icon:'../../static/user/list2.png',
						name:"个人信息",
						location_href:"/pages/user/user_info"
					},
					{
						icon:'../../static/user/list3.png',
						name:"银行卡管理",
						location_href:"/pages/bank/bank_list"
					},
					{
						icon:'../../static/user/list4.png',
						name:"联系客服",
						type:"kf"
					},
					{
						icon:'../../static/user/list6.png',
						name:"关于我们",
						type:"gy"
					},
					{
						icon:'../../static/user/list5.png',
						name:"退出登录",
						type:"tc"
					},
				]
			}
		},
		computed:{
			userInfo(){
				return this.$store.state.user.userInfo
			},
			tabList(){
				return this.$store.state.order.tabList
			}
		},
		onLoad() {
			// #ifdef MP
			this.offset = [
				0,0
			]
			// #endif
			// console.log(uni.getStorageSync('init'));
			this.thisinit = uni.getStorageSync('init');
			// console.log(uni.getStorageSync('token'));
			// let token = uni.getStorageSync('token')
			// if(token){
			// 	this.$store.dispatch("getUserInfo");
			// 	this.$store.dispatch("getOrderStatus")
			// }
			
		},
		onShow() {
			let token = uni.getStorageSync('token')
			if(token){
				this.$store.dispatch("getUserInfo");
				this.$store.dispatch("getOrderStatus")
			}
		},
		methods:{
			//跳转到订单列表
			orderList(index){
				uni.navigateTo({
					url:'/pages/order/order_list?tabCode='+index
				})
			},
			//跳转到地址
			tourls(obj){
				var that = this;
				if(obj.location_href){
					uni.navigateTo({
						url:obj.location_href
					})
				}
				//客服处理
				if(obj.type=='kf'){
					this.show_badge = false;
					this.$refs.kf.open();
				}
				//退出处理
				if(obj.type=='tc'){
					uni.showModal({
						title:"提示",
						content:"请问确定退出吗？",
						success(res){
							that.$store.dispatch("clearTabList");
							that.$store.dispatch("loginOut");
						}
					})
				}
				if(obj.type=='gy'){
					uni.navigateTo({
						url:'/pages/user/about'
					})
				}
			},
			//点击取消客服
			quxiaoKf(){
				this.$refs.kf.close();
				this.show_badge = true;
			},
			//点击拨打电话
			phoneCalls(phone){
				this.quxiaoKf();
				phone = phone.replace(/-/g,'')
				// console.log(phone);
				uni.makePhoneCall({
					phoneNumber:phone,
					success(res){
						console.log(res);
					}
				})
			},
			//去登录
			login(){
				uni.navigateTo({
					url:'/pages/user/login'
				})
			},
			//跳转到余额
			gobalance(){
				uni.navigateTo({
					url:'/pages/user/balance'
				})
			},
			//跳转到个人信息设置
			goSet(){
				uni.navigateTo({
					url:'/pages/user/set_user_info'
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-one{
		position: relative;
	}
	.juedui{
		position: absolute;
		top:-30rpx;
		right: 0;
	}
	.kf-btn{
		margin-top: 36rpx;
		>view:nth-child(1){
			width: 220rpx;
			height: 70rpx;
			border-radius: 35rpx 35rpx 35rpx 35rpx;
			opacity: 1;
			border: 1rpx solid $default-button-color;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: $default-button-color;
			text-align: center;
			line-height: 70rpx;
		}
		>view:nth-child(2){
			width: 220rpx;
			height: 70rpx;
			background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			opacity: 1;
			text-align: center;
			line-height: 70rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: $default-button-foncolor;
		}
	}
	.txte{
		color: #333333;
		font-weight: bold;
	}
	.kf-txt{
		text-align: center;
		>view:nth-child(1){
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			
		}
		>view:nth-child(2){
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #999999;
			margin-top: 20rpx;
		}
		>view:nth-child(3){
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 20rpx;
		}
	}
	.kf-top{
		margin-top: 58rpx;
		margin-left: 59rpx;
		margin-right: 61rpx;
	}
	.kf{
		width: 600rpx;
		// height: 392rpx;
		background: #FFFFFF;
		box-shadow: 0px 1rpx 9rpx 1rpx rgba(209,209,209,0.5);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		border: 1rpx solid #E9E9E9;
		padding-bottom: 36rpx;
	}
	.list-set-detal{
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.list-set-txt1{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 20rpx;
	}
	.list-set-img1{
		width: 44rpx;
		height: 44rpx;
	}
	.list-set-img2{
		width: 14rpx;
		height: 24rpx;
	}
	.list-set-top{
		// margin-top: 30rpx;
		margin-left: 20rpx;
		margin-right: 30rpx;
	}
	.mytop20{
		width: 100%;
		height: 20rpx;
	}
	/* #ifdef H5 */
	.list-set{
		width: 690rpx;
		// height: 538rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-top: 50rpx;
		margin-bottom: 193rpx;
	}
	/* #endif */
	/* #ifndef H5 */
	.list-set{
		width: 690rpx;
		height: 538rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-top: 50rpx;
		margin-bottom: 93rpx;
	}
	/* #endif */
	.badge{
		margin-left: -20rpx;
	}
	.order-detal-txt{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.order-detal-img{
		width: 66rpx;
		height: 66rpx;
	}
	.order-detal{
		margin-left: 21rpx;
		margin-right: 32rpx;
		margin-top: 40rpx;
	}
	.myorder-header-img1{
		>view:nth-child(1){
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		>image:nth-child(2){
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}
	.myorder-header{
		margin-top: 39rpx;
		margin-left: 18rpx;
		margin-right: 32rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}
	.order{
		width: 690rpx;
		height: 246rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}
	.price-ones{
		margin-top: 30rpx;
		>view:nth-child(1){
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}
		>view:nth-child(2){
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-top: 15rpx;
			text-align: center;
		}
	}
	.user-money{
		width: 690rpx;
		height: 152rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-top: -113rpx;
	}
	.user{
		width: 690rpx;
		margin-left: 30rpx;
	}
	.header-dengji{
		margin-left: 20rpx;
		margin-top: 15rpx;
		>image{
			width: 32rpx;
			height: 28rpx;
		}
		>view{
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #F69C14;
			margin-left: 12rpx;
		}
	}
	.header-txt1{
		margin-left: 30rpx;
		margin-top: 33rpx;
		>view{
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.header-txt{
		margin-left: 30rpx;
		margin-top: 30rpx;
		>view:nth-child(1){
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-left: 20rpx;
		}
	}
	.header-img{
		width: 113rpx;
		height: 113rpx;
		border-radius: 56rpx;
	}
	.header-user{
		margin-top: 70rpx;
		margin-left: 40rpx;
	}
	.header-wd{
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		padding-top: 55rpx;
		text-align: center;
	}
	.header{
		width: 750rpx;
		height: 504rpx;
		/* #ifdef MP */
		background-image: url('http://ws.facai.maowenke.cn/img/userbg.png');
		/* #endif */
		/* #ifndef MP */
		background-image: url('../../static/user/userbg.png');
		/* #endif */
		
		background-size: 100%;
	}
</style>